<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!---清除默认css-->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 后台管理按钮 -->
    <button type="button" class="btn btn-info">后台管理</button>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
        <a class="navbar-brand" data-toggle="modal" data-target="#exampleModal" href="#" id="n1">官方首页</a>
        <!-- 无法跳转弹窗 -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
                    </div>
                    <div class="modal-body">
                        由于本网站仅仅做学习使用，因此无法跳转，请谅解
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" data-toggle="modal" data-target="#exampleModal" href="#" id="n2">政府合作 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#exampleModal" href="#" id="n3">新闻资讯</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                与我相关
              </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal" href="#">嘤嘤嘤</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal" href="#">嗷嗷嗷</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal" href="#">汪汪汪</a>
                    </div>
                </li>
            </ul>
            <div class="logo">Welcome To My Page</div>

            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="请输入需要搜索的内容" aria-label="Search">
                <button type="button" class="btn btn-outline-success" data-target="#reminder" data-toggle="modal">搜索</button>
            </form>
            <!-- 搜索功能提示弹窗 -->
            <div class="modal fade" id="reminder" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">提示</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
                        </div>
                        <div class="modal-body">
                            由于正在学习阶段，此功能还未能完善，请谅解
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                        </div>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-outline-primary login-btn">登录</button>
            <button type="button" class="btn btn-outline-primary">注册</button>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div class="container">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./img/banner1.png" class="d-block w-100" alt="">
                </div>
                <div class="carousel-item">
                    <img src="./img/banner2.png" class="d-block w-100" alt="">
                </div>
                <div class="carousel-item">
                    <img src="./img/banner3.png" class="d-block w-100" alt="">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <button type="button" class="btn btn-secondary"><</button>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <button type="button" class="btn btn-secondary">></button>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 新闻导航栏栏 -->
    <div class="news-container">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-news1" role="tab" aria-controls="pills-news1" aria-selected="true">国内</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-news2" role="tab" aria-controls="pills-news2" aria-selected="false">国际</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-news3" role="tab" aria-controls="pills-news3" aria-selected="false">军事</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-news4" role="tab" aria-controls="pills-news4" aria-selected="false">财经</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-news5" role="tab" aria-controls="pills-news5" aria-selected="false">娱乐</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-news6" role="tab" aria-controls="pills-news6" aria-selected="false">体育</a>
            </li>

        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-news1" role="tabpanel" aria-labelledby="pills-home-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-news2" role="tabpanel" aria-labelledby="pills-profile-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-news3" role="tabpanel" aria-labelledby="pills-contact-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-news4" role="tabpanel" aria-labelledby="pills-contact-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-news5" role="tabpanel" aria-labelledby="pills-contact-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pills-news6" role="tabpanel" aria-labelledby="pills-contact-tab">
                <div class="row">
                    <div class="col-sm-7">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                            <li class="list-group-item"><a href=""> Cras justo odio</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-5">
                        <div class="row">
                            <div class="col-sm-6 img">
                                <img src="./img/news1.png" alt="">
                            </div>
                            <div class="col-sm-6 character">
                                <h5 class="title">
                                    <a href="#">人大三次会议召开</a>
                                </h5>
                                <p>
                                    十三届全国人大三次会议将于2020年5月22日在北京召开 全国政协十三届三次会议将于2020年5月21日在北京召开
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部内容 -->
    <footer>
        <span>参与人员：李奇隆 胡正开 刘瑞园 &emsp; 注：网站内容来自于互联网收集，若有侵权，会立即删除</span>
        <p>京ICP证666666号 &nbsp;
            <svg class="bi bi-tv-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zM2 2h12s2 0 2 2v6s0 2-2 2H2s-2 0-2-2V4s0-2 2-2z"/>
          </svg> &emsp; 违法和不良信息举报电话400-111-1111<svg class="bi bi-phone" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
            <path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
        </svg>
        </p>
    </footer>
</body>


</html>